<template>
  <div class="history-hot-container">
    <!-- 历史记录 -->
    <div class="hs-ht" v-show="isShowBox">
      <!-- 头部 -->
      <div class="hd">
        <h4>历史记录</h4>
        <!-- 删除图标 -->
        <van-icon name="delete-o" @click="deleteHistory" />
      </div>
      <!-- 底部 -->
      <div class="ft">
        <van-tag
          plain
          round
          type="default"
          v-for="(item, index) in historyListData"
          :key="index"
          @click="tagClick(item)"
          >{{ item }}</van-tag
        >
      </div>
    </div>
    <!-- 热门搜索 -->
    <div class="hs-ht">
      <!-- 头部 -->
      <div class="hd">
        <h4>热门搜索</h4>
      </div>
      <!-- 底部 -->
      <div class="ft">
        <van-tag
          plain
          round
          type="default"
          v-for="(item, index) in hotKeywordList"
          :key="index"
          :class="{ red: item.is_hot === 1 }"
          @click="tagClick(item.keyword)"
          >{{ item.keyword }}</van-tag
        >
      </div>
    </div>
  </div>
</template>

<script>
// 导入deleteHistoryAPI接口
import { deleteHistoryAPI } from '@/api/deleteHistoryAPI.js'
export default {
  props: {
    // 历史记录数据列表
    historyListData: {
      type: Array
    },
    // 热门搜索数据列表
    hotKeywordList: {
      type: Array
    }
  },
  name: 'HistoryHot',
  data() {
    return {
      // 控制历史记录盒子显示隐藏
      isShowBox: true
    }
  },
  methods: {
    tagClick(searchValue) {
      // 将获取到的关键字传给父组件searchPopup
      // this.$emit('自定义事件名', 要传给父组件的数据)
      // this.$emit()方法声明一个自定义事件并触发该事件，以及传递数据给父组件
      this.$emit('tagClick', searchValue)
    },
    // 删除历史记录
    async deleteHistory() {
      const { data: res } = await deleteHistoryAPI()
      // console.log(res)
      if (res.errno !== 0) {
        this.$toast.fail('删除历史记录失败')
      }
      this.$toast.success('删除成功!')
      setTimeout(() => {
        this.isShowBox = false
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.history-hot-container {
  .hs-ht {
    padding: 20px;
    margin-bottom: 40px;
    background-color: #fff;
    .hd {
      display: flex;
      justify-content: space-between;
      h4 {
        font-size: 46px;
        font-weight: 400;
      }
    }
    .ft {
      .van-tag {
        margin-right: 15px;
        padding: 3px 10px 3px;
      }
    }
  }
}

.red {
  color: red;
}
</style>
